<template>
  <div class="app-container">
    <div class="search_box">
      <div>
        <span> 账号状态: </span>
        <el-select
          v-model="search.status"
          popper-class="selectClass"
          size="small"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-button size="small" class="search_btn" type="primary" @click="searchOperate(1)">
        查询
      </el-button>
      <el-button size="small" class="search_btn" type="info" @click="searchOperate(2)">
        重置
      </el-button>
      <el-button size="small" class="search_btn" type="success" @click="validateAccount()">
        校验账号权限
      </el-button>
      <el-button size="small" class="search_btn" type="warning">
        导入
      </el-button>
      <el-button size="small" class="search_btn" type="danger">
        导出
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
      height="calc(100vh - 180px)"
    >
      <el-table-column align="center" key="validate"
                       prop="validate"
                       label="校验状态"
                       class-name="red-column"
      />
      <el-table-column align="center" v-for="(header, index) in headers" :key="index"
                       :prop="header.key"
                       :label="header.label"
      />
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        headers: null,
        list: null,
        listLoading: true,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        search: {
          status: "",
        },
        statusOptions: [
          {label: '正常', value: '正常'},
          {label: '锁定', value: '锁定'},
        ]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        this.$store.dispatch('accountPermission/getHeaders').then((headers) => {
          this.$store.dispatch('accountPermission/getList').then((list) => {
            if(this.search.status) {
              list = list.filter(data => !this.search.status || data.k9.toLowerCase().includes(this.search.status.toLowerCase()));
            }
            this.headers = headers;
            const startIndex = (this.pageNum - 1) * this.pageSize;
            const endIndex = startIndex + this.pageSize;
            this.total = list.length;
            this.list = list.slice(startIndex, endIndex);
            this.listLoading = false;
          })
        })
      },
      handleSizeChange(val) {
        this.pageNum = 1;
        this.pageSize = val;
        this.fetchData();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.fetchData();
      },
      searchOperate(type) {
        if (type == 2) {
          this.search = {
            status: "",
          };
        }
        this.fetchData();
      },
      validateAccount() {
        const list = [];
        this.list.forEach(data => {
          if(data.k6 == '外部人员' && data.k15 == '') {
            data.validate = '外部人员，SDP审批人不能为空';
            list.push(data);
          }
        });
        this.list = list;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/common.scss";
  ::v-deep .el-table .red-column .cell {
    color: red !important;
  }
</style>
